<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第九周第二节练习</title>

    <style>
        body{margin: 0;}

        html,body{width: 100%;
                height: 100%;}

        div{width: 75%;
            margin: 0 auto;
            overflow: hidden;}

        span{float: left;
            width: 30%;
            margin-right:1%;
            margin-top:1%;}

        img{width: 100%;}

        a:link{color: black;
                font-size: 50px;}
        
        a:visited{color: tomato;}

        a:hover{color: teal;
                font-size: 1000px;}
        
        a:active{color: black;font-size: 100px;}

        div > span:nth-of-type(3){float: right;
                                    width:40%;
                                    margin-right:1%;
                                    margin-top:1%;}

        @media screen and (max-width:560px) {
            span{width: 49%;
                margin-top: 10px;}
            
        }
    </style>
</head>
<body>
    
    <div>
        <span><img src="../../img/新建文件夹/0c0f9bf61e7f07ea2647b38437f2aede4cc9bd64.gif" alt="1"></span>
        <span><img src="../../img/新建文件夹/6eae5057ce332b7f90db9c91db91b5bd0157d1a8.gif" alt="2"></span>
        <span><img src="../../img/新建文件夹/8fe23bc79f3df8dc829bdf78c111728b46102866.gif" alt="3"></span>
        <span><img src="../../img/新建文件夹/9f7a44c4231b3831f483b6d24a74bffd920e66aa.gif" alt="4"></span>
        <span><img src="../../img/新建文件夹/f0a84ff55220a4910f0af12fcc51313f.jpg" alt="5"></span>
        <span><img src="../../img/新建文件夹/QQ图片20211022122821.jpg" alt="6"></span>
        <span><img src="../../img/新建文件夹/微信截图_20211006232900.png" alt="7"></span>
    </div>

    <div id="a">
        <a href="https://www.bilibili.com/">B站</a>
        <hr>
        <a href="www.baidu.com">baidu</a>
    </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>